<template>
  <div>
    <el-row>
      <el-col :span="4">
        <el-card class="cate-container">
          <el-menu
            :default-active="defaultactive"
            class="el-menu-vertical-demo"
            background-color="white"
            text-color="black"
            active-text-color="skyblue"
            ><el-menu-item index="0" @click="showallgoods()">
              <i class="el-icon-eleme"></i>
              <span slot="title">全部商品</span>
            </el-menu-item>
            <el-menu-item
              v-for="cate in cates"
              :key="cate.id"
              :index="cate.id"
              @click="showgoods(cate.id)"
            >
              <i class="el-icon-eleme"></i>
              <span slot="title">{{ cate.catename }}</span>
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-col>
      <el-col :span="20">
        <el-card class="good-container">
          <el-row class="box">
            <el-col
              :span="5"
              v-for="good in goods"
              :key="good.id"
              style="margin: 10px"
            >
              <el-card>
                <el-image
                  v-if="good.img"
                  :src="good.img"
                  style="height: 130px"
                  lazy
                ></el-image>
                <el-image v-else style="height: 130px">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
                <el-descriptions :column="1">
                  <el-descriptions-item label="名称">{{
                    good.name
                  }}</el-descriptions-item>
                  <el-descriptions-item label="价格">{{
                    good.price
                  }}</el-descriptions-item>
                </el-descriptions>
                <el-row>
                  <el-col :span="12">
                    <el-button size="mini" @click="showdetail(good.id)"
                      >查看详情</el-button
                    >
                  </el-col>
                  <el-col :span="12">
                    <el-button
                      size="mini"
                      type="primary"
                      @click="buyit(good.id)"
                      >加购</el-button
                    >
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!-- 详细列表 -->
    <el-dialog title="提示" :visible.sync="detailVisible" width="60%">
      <span>{{ detailobj.name }}</span>
      <el-descriptions title="详细信息" :column="3" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            商品名
          </template>
          {{ detailobj.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-home"></i>
            商家名
          </template>
          {{ detailobj.busname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-flag"></i>
            分类
          </template>
          {{ detailobj.catename }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            状态
          </template>
          <el-tag v-if="detailobj.ishot == '1'" size="small" type="danger"
            >热门</el-tag
          >
          <el-tag v-else size="small">普通</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-finance"></i>
            当前价格
          </template>
          {{ detailobj.price }}
        </el-descriptions-item>
      </el-descriptions>
      <el-image
        v-if="detailobj.img"
        style="width: 100%"
        :src="detailobj.img"
        lazy
      ></el-image>
      <el-image v-else style="height: 130px">
        <div slot="error" class="image-slot">
          <i class="el-icon-picture-outline"></i>
        </div>
      </el-image>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detailVisible: false,
      islogin: "0",
      defaultactive: "0",
      detailobj: {},
      goods: [],
      cates: [],
    };
  },
  created() {
    this.defaultactive = window.sessionStorage.getItem("activecate");
    this.checklogin();
    this.getcate();
    this.choosegooddata();
  },
  methods: {
    choosegooddata() {
      if (
        window.sessionStorage.getItem("activecate") === null ||
        window.sessionStorage.getItem("activecate") == "0"
      ) {
        this.showallgoods();
      } else {
        this.showgoods(window.sessionStorage.getItem("activecate"));
      }
    },
    checklogin() {
      this.islogin = this.$cookie.get("login");
    },
    getcate() {
      this.$http
        .get("/getcates")
        .then((res) => {
          if (res.data.code == 200) {
            this.cates = res.data.data;
          } else {
            this.$Message.error("获取分类失败！");
          }
        })
        .catch((err) => {
          this.$Message.error("系统错误！" + err);
        });
    },
    showgoods(cateid) {
      window.sessionStorage.setItem("activecate", cateid);
      this.$http
        .get("getgoodsbycate", { params: { cateid: cateid } })
        .then((res) => {
          if (res.data.code == 200) {
            this.goods = res.data.data;
          } else {
            this.$Message.error("获取商品失败！");
          }
        })
        .catch((err) => {
          this.$Message.error("系统错误！" + err);
        });
    },
    showallgoods() {
      window.sessionStorage.setItem("activecate", "0");
      this.$http
        .get("getgoodsbycate")
        .then((res) => {
          if (res.data.code == 200) {
            this.goods = res.data.data;
          } else {
            this.$Message.error("获取商品失败！");
          }
        })
        .catch((err) => {
          this.$Message.error("系统错误！" + err);
        });
    },
    showdetail(id) {
      this.$http
        .get("getgoodsbyid", { params: { id: id } })
        .then((res) => {
          if (res.data.code == 200) {
            this.detailobj = res.data.data;
            this.detailVisible = true;
          } else {
            this.$Message.error("查询信息信息失败！");
          }
        })
        .catch((err) => {
          this.$Message.error("系统错误" + err);
        });
    },
    buyit(id) {
      if (this.$cookie.get("login") !== "1") {
        this.$Message.error("您好！请先登录！");
        return;
      }
      this.$confirm("此操作将加购该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = new URLSearchParams();
          params.append("token", window.sessionStorage.getItem("usertoken"));
          params.append("userid", window.sessionStorage.getItem("userid"));
          params.append("goodid", id);
          this.$http
            .post("/addcart", params)
            .then((res) => {
              if (res.data.code == 200) {
                this.$Message.success(res.data.msg);
              } else {
                this.$Message.error(res.data.msg);
              }
            })
            .catch((err) => {
              this.$Message.error("系统错误" + err);
            });
        })
        .catch(() => {
          this.$Message({
            type: "info",
            message: "已取消加购",
          });
        });
    },
  },
};
</script>

<style scoped>
.el-main {
  background-color: white;
}
.good-container {
  height: 600px;
  overflow: auto;
}
.cate-container {
  height: 600px;
  overflow: auto;
}
.box {
  display: inline-block;
}
</style>